<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<script type="text/javascript" src="../layui/layui.js"></script>
	</head>
	<body>
		<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">班级名称</label>
			<div class="layui-input-block">
				<input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">教师名称</label>
			<div class="layui-input-block">
				<input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
			  <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
			  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<div class="layui-input-block" style="width: 200px;float: left;">
			<input type="text" name="title" required  lay-verify="required" placeholder="请输入关键字" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-inline" style="width: 100px;float: left;">
			<button type="button" id="find" class="layui-btn">查找学生</button>
		</div>
		</form>
	<button type="button" id="addall" class="layui-btn">批量添加</button>
	<table class="layui-hide" id="test"></table>
	
	<script>
	layui.use('table', function(){
	  var table = layui.table;
	  
	  table.render({
	    elem: '#test'
	    ,url:'../../json/test.json'
	    ,cols: [[
	      {type:'checkbox'}
	      ,{field:'id', width:80, title: 'ID', sort: true}
	      ,{field:'username', width:80, title: '用户名'}
	      ,{field:'sex', width:80, title: '性别', sort: true}
	      ,{field:'city', width:80, title: '城市'}
		  ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
	    ]]
	    ,page: true
	  });
	  
	  var table = layui.table;
	  table.on('tool(table1)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	  	var data = obj.data; //获得当前行数据
	  	var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  	var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	  	console.log(data);
	  	if(layEvent === 'detail'){ //查看
	  		//do somehing
	  	} else if(layEvent === 'del'){ //删除
	  		layer.confirm('真的删除行么', function(index){
	  		obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	  		layer.close(index);
	  		//向服务端发送删除指令
	  		});
	  	} else if(layEvent === 'edit'){ //编辑
	  		//do something
	  		layer.open({
	  		type: 2, 
	  		area: ['800px', '600px'],
	  		content: 'editFood.html?#/id='+data.id //这里content是一个普通的String
	  		});
	  		//同步更新缓存对应的值
	  		obj.update({
	  		username: '123'
	  		,title: 'xxx'
	  		});
	  	} else if(layEvent === 'LAYTABLE_TIPS'){
	  		layer.alert('Hi，头部工具栏扩展的右侧图标。');
	  	}
	  });
	});
	</script>
	<script type="text/html" id="barDemo">
	  <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
	  
	  <!-- 这里同样支持 laytpl 语法，如： -->
	  {{#  if(d.auth > 2){ }}
	    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
	  {{#  } }}
	</script>
	</body>
</html>
